<template>
  <view class="container">
    <view class="info-card">
      <view class="info-title">各平台差异</view>
      <view>1.H5平台可以直接使用VUE的echarts图表组件，效果更好</view>
      <view>2.小程序平台使用的是uuchart组件（根据echarts适配而来）</view>
      <view>3.APP平台使用echarts图表有些问题</view>
    </view>
    <!-- 折线图 -->
    <line-chart-progress @onTabClick="onTabSelectClick" :chart-title="chartData.title"
                         :tab-list="chartData.tabList" :scrollTop="scrollTop"
                         :tab-below="chartData.tabBelow" :show-complete="chartData.showComplete"
                         :to-detail="chartData.toDetail" :chart-data="chartLineObj"
                         :show-route-detail="chartData.showRouteDetail"
                         :month-data="chartData.monthData"></line-chart-progress>
    <!-- 表格图 -->
    <table-chart chart-title="项目总览" :table-titles="tableTitles" :table-list="tableList"></table-chart>
    <!-- 横向折线图 -->
    <grade-chart chart-title="客源市场" :parent-data="sourceData"></grade-chart>
    <!-- 饼状图 -->
    <pie-chart chart-title="客群游玩分析" :value-list="bwTouristPlayData.pieValueList"
               :chart-data="bwTouristPlayData.pieChartList"></pie-chart>
    <!-- 柱状图 -->
    <bar-chart-bubble chart-title="提前购票占比" v-model="buyTicketData"></bar-chart-bubble>
    <view style="height: 20px;"></view>
  </view>
</template>

<script>
// #ifndef MP
import LineChartProgress from "@/components/chart/LineChartProgress/index.vue"
import TableChart from '@/components/chart/TableChart/index'
import GradeChart from '@/components/chart/GradeChart/index.vue'
import PieChart from '@/components/chart/PieChart/index.vue'
import BarChartBubble from '@/components/chart/BarChartBubble/index.vue'
// #endif
import {
  convertLineChartData
} from '@/common/common.js'

let timerr = function test(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms)
  })
}
const timer = ms => new Promise(resolve => setTimeout(resolve, ms))
export default {
  components: {
    // #ifndef MP
    LineChartProgress,
    BarChartBubble,
    TableChart,
    GradeChart,
    PieChart
    // #endif
  },
  data() {
    return {
      chartData: {},
      chartLineObj: {},
      //表格的数据
      tableTitles: [],
      tableList: [],
      //等级的书籍
      sourceData: {},
      //饼状图数据
      bwTouristPlayData: {},
      //柱状图数据
      buyTicketData: [],
      scrollTop: ''
    }
  },
  onLoad() {
    // debugger
    let chartObj = require('./chartConf')
    this.tableTitles = chartObj.tableTitles
    this.chartData = chartObj.chartData
    this.getHomeChartData(0)
    this.getTableChartData()
    this.getGradeChartData()
    this.getPieChartData()
    this.getBarChartData()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    onTabSelectClick(event) {
      console.log(event)
      let chartId = event[1]
      this.getHomeChartData(chartId)
    },
    async getHomeChartData(flag) {
      await timerr(100)
      uniCloud.callFunction({
        name: 'json-data',
        data: {
          action: 'mChart',
          name: `route1_${flag}.json`
        },
        success: (res) => {
          // debugger
          console.log(res)
          let result = res.result
          this.chartLineObj = convertLineChartData(result.list, 'year', 'date', 'num')
          this.chartData.monthData = result.monthData
        }
      })
    },
    async getTableChartData() {
      await timer(200)
      uniCloud.callFunction({
        name: 'json-data',
        data: {
          action: 'mChart',
          name: 'table.json'
        },
        success: (res) => {
          console.log(res)
          this.tableList = res.result
        }
      })
    },
    async getGradeChartData() {
      await timer(300)
      uniCloud.callFunction({
        name: 'json-data',
        data: {
          action: 'mChart',
          name: 'tourist.json'
        },
        success: (res) => {
          this.sourceData = res.result
        }
      })
    },
    async getPieChartData() {
      await timer(400)
      uniCloud.callFunction({
        name: 'json-data',
        data: {
          action: 'mChart',
          name: 'touristPlay.json'
        },
        success: (res) => {
          // debugger
          const pieArr = res.result
          pieArr.forEach((item, index) => {
            item.name = item.touristKey
            item.value = item.ratio
            item.percent = item.ratio + '%'
          })
          this.bwTouristPlayData.pieValueList = [{
            title: '占比',
            key: 'percent'
          }]
          this.bwTouristPlayData.pieChartList = pieArr
        }
      })
    },
    async getBarChartData() {
      await timer(500)
      uniCloud.callFunction({
        name: 'json-data',
        data: {
          action: 'mChart',
          name: 'ticketBuy.json'
        },
        success: (res) => {
          console.log(res)
          this.buyTicketData = res.result
        }
      })
    },
  }
}
</script>

<style>
.container {
  width: 100%;
  padding-top: 10px;
  min-height: 100vh;
  background-image: linear-gradient(135deg, #97abff, #123597);
}

.info-card {
  margin: 10px auto;
  padding: 5px;
  font-size: small;
  border-radius: 5px;
  border: #161823 solid 1px;
  width: calc(345px - 10px);
}

.info-title {
  font-size: unset;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
</style>
